<template>
  <AdminLayout title="添加分类" subtitle="创建新的产品分类">
    <div class="max-w-2xl">
      <form @submit.prevent="submit" class="space-y-6">
        <div class="bg-white shadow-sm rounded-lg">
          <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">分类信息</h3>
          </div>
          
          <div class="px-6 py-4 space-y-6">
            <!-- 分类名称 -->
            <div>
              <label for="name" class="block text-sm font-medium text-gray-700">
                分类名称 <span class="text-red-500">*</span>
              </label>
              <input 
                id="name"
                v-model="form.name"
                type="text" 
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
                :class="{ 'border-red-300': errors.name }"
                placeholder="请输入分类名称"
              />
              <p v-if="errors.name" class="mt-1 text-sm text-red-600">{{ errors.name }}</p>
            </div>

            <!-- 分类别名 -->
            <div>
              <label for="slug" class="block text-sm font-medium text-gray-700">
                分类别名 <span class="text-red-500">*</span>
              </label>
              <input 
                id="slug"
                v-model="form.slug"
                type="text" 
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
                :class="{ 'border-red-300': errors.slug }"
                placeholder="请输入分类别名（用于URL）"
              />
              <p v-if="errors.slug" class="mt-1 text-sm text-red-600">{{ errors.slug }}</p>
              <p class="mt-1 text-sm text-gray-500">用于URL的标识符，只能包含字母、数字和连字符</p>
            </div>

            <!-- 分类描述 -->
            <div>
              <label for="description" class="block text-sm font-medium text-gray-700">
                分类描述
              </label>
              <textarea 
                id="description"
                v-model="form.description"
                rows="3"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
                :class="{ 'border-red-300': errors.description }"
                placeholder="请输入分类描述"
              ></textarea>
              <p v-if="errors.description" class="mt-1 text-sm text-red-600">{{ errors.description }}</p>
            </div>

            <!-- 排序顺序 -->
            <div>
              <label for="sort_order" class="block text-sm font-medium text-gray-700">
                排序顺序
              </label>
              <input 
                id="sort_order"
                v-model.number="form.sort_order"
                type="number" 
                min="0"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
                :class="{ 'border-red-300': errors.sort_order }"
                placeholder="0"
              />
              <p v-if="errors.sort_order" class="mt-1 text-sm text-red-600">{{ errors.sort_order }}</p>
              <p class="mt-1 text-sm text-gray-500">数字越小排序越靠前</p>
            </div>

            <!-- 状态 -->
            <div>
              <div class="flex items-center">
                <input 
                  id="is_active"
                  v-model="form.is_active"
                  type="checkbox" 
                  class="h-4 w-4 text-gray-900 focus:ring-gray-900 border-gray-300 rounded"
                />
                <label for="is_active" class="ml-2 block text-sm text-gray-900">
                  启用此分类
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex justify-end space-x-3">
          <Link :href="route('admin.categories.index')" 
                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-200">
            取消
          </Link>
          <button 
            type="submit" 
            :disabled="processing"
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
          >
            <svg v-if="processing" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            {{ processing ? '创建中...' : '创建分类' }}
          </button>
        </div>
      </form>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref } from 'vue'
import { Link, useForm } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'

const form = useForm({
  name: '',
  slug: '',
  description: '',
  sort_order: 0,
  is_active: true,
})

const processing = ref(false)

const submit = () => {
  processing.value = true
  form.post(route('admin.categories.store'), {
    onFinish: () => {
      processing.value = false
    }
  })
}

const errors = form.errors
</script>
